<template>
  <div class="phone-root">
    <van-nav-bar
      title="绑定手机号/邮箱"
      left-arrow
      @click-left="$router.goBack()"
    />

    <div class="select-box flex">
      <div class="select" :class="active ? 'selected' : ''" @click="active = 0">
        手机号
      </div>
      <div class="select" :class="active ? '' : 'selected'" @click="active = 1">
        邮箱号
      </div>
    </div>

    <div class="phone-box" v-if="!active">
      <div class="input-box">
        <div class="title">手机号码</div>

        <div class="input flex">
          <div class="country">中国大陆</div>
          <van-field v-model="value" placeholder="请输入手机号码" />
        </div>
      </div>

      <div class="input-box">
        <div class="title">短信验证</div>

        <div class="input flex-btw">
          <van-field v-model="value" placeholder="请输入短信验证码" />

          <div class="text">获取验证码</div>
        </div>
      </div>
    </div>

    <div class="email-box" v-if="active">
      <div class="input-box">
        <div class="title">邮箱地址</div>

        <div class="input flex">
          <van-field v-model="value" placeholder="请输入邮箱地址" />
        </div>
      </div>

      <div class="input-box">
        <div class="title">邮箱验证</div>

        <div class="input flex">
          <van-field v-model="value" placeholder="请输入邮箱验证码" />
          <div class="text">获取验证码</div>
        </div>
      </div>
    </div>

    <div class="btn">确认绑定</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      value: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.phone-root {
  height: 100vh;
  background-color: #fff;
  font-size: 0.26rem;
  .select-box {
    width: 3rem;
    height: 0.6rem;
    color: #fff;
    border: 0.02rem solid #2d7afe;
    margin: 0.3rem auto;
    .select {
      flex: 1;
      height: 100%;
      line-height: 0.6rem;
      text-align: center;
      background-color: #2d7afe;
    }

    .selected {
      flex: 1;
      height: 100%;
      line-height: 0.6rem;
      text-align: center;
      background-color: #fff;
      color: #2d7afe;
    }
  }

  .input-box {
    padding: 0.3rem;
    border-bottom: 0.01rem solid #f5f5f5;

    .title {
      text-align: left;
      margin-bottom: 0.2rem;
    }

    .country {
      text-align: left;
      min-width: 1.2rem;
    }

    .text {
      color: #2d7afe;
      min-width: 1.5rem;
    }
  }

  .btn {
    width: 5rem;
    height: 0.88rem;
    background-color: #2d7afe;
    font-size: 0.26rem;
    line-height: 0.88rem;
    color: #fff;
    border-radius: 0.1rem;
    margin: 0.3rem auto;
  }
}
</style>
